<template>
	<navigator class="goods-goods"  :url="'/pages/goods/show?id='+goods.id">  <!-- 跳转指定 -->
		<u-skeleton rows='1' :rowsWidth="['100%']" rowsHeight="300rpx" :loading="loading" :title="false">
			<u-image width="100%" height="300rpx" :src="goods.cover_url"></u-image>
		</u-skeleton>
		<u-skeleton style="padding-top: 8rpx;" rows='1' :rowsWidth="['100%']" :loading="loading" :title="false">
			<view class="title u-line-1 ">{{goods.title}}</view>
		</u-skeleton>
		
		<view class="content">  <!-- 右边的样式会覆盖左边的不想要的样式 -->
			<u-skeleton class="price" rows='1' :rowsWidth="['90%']" :loading="loading" :title="false">
				<view>￥{{goods.price}}</view>
			</u-skeleton>
			<u-skeleton class="sales" rows='1' :rowsWidth="['100%']"  :loading="loading" :title="false">
				<view>销量: {{goods.sales !==undefined ? goods.sales : '暂无'}}</view>
			</u-skeleton>
		</view>
		
	</navigator>
</template>

<script>
	export default {
		name:"goods-card",
		props:{
			goods:{
				type: Object,
				default(){
					return {}
				}
			},
			loading:{
				type:Boolean,
				default(){
					return true
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.goods-goods {
		padding: 40rpx;
		margin-top: 30rpx;
		box-shadow: 0 12rpx 20rpx 0 rgba($color: #000000, $alpha: .1);
		.title{
			margin: 10rpx 0;
			font-weight: 500;
			font-size: 32rpx;
		};
		.content{
			display: flex;
			flex-direction: row;
			align-goodss: center;
			justify-content: space-between;
			font-size: 30rpx;
			.price{
				padding-top: 8rpx; 
				color: red;
			};
			.sales{
				padding-top: 8rpx;
				color: black;
			};
		};
	};
</style>
